<script setup lang="ts">
import LoginLayout from '@/components/login-layout.vue'

import Form from './form.vue'

const { push } = useRouter()

function goToLogin() {
    push('/login')
}
</script>

<template>
    <LoginLayout>
        <div class="custom-shadow px-50 pb-30 ml-100 bg-white rd-8 flex flex-col relative w-460 justify-center">
            <div class="mt-20">
                <Form />

                <ElButton link
                          type="primary"
                          class="text-center w-full"
                          @click="goToLogin"
                >
                    已有账号？马上登录
                </ElButton>
            </div>
        </div>
    </LoginLayout>
</template>

<style lang="scss" scoped>
.switch {
    cursor: pointer;
    height: 70px;
    width: 70px;
    background-image: url('/switch.svg');
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    border-top-right-radius: 8px;
}

.custom-shadow {
    box-shadow: 15px -5px 30px 0 rgb(0 0 0 / 20%);
}
</style>
